<template>
  <div class="about" ref="sddd">
    <h1>This is an about page</h1>
    <p>{{ state }}</p>
  </div>
  <button @click="state++">点我+1</button>
  <hr>
  <h1>姓名:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <h1>薪资:{{ person.job.job1 }}</h1>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.job1 ++">修改薪资</button>

</template>
<script setup lang="ts">
import {watch,reactive,ref  } from 'vue';
interface States {
  count?:number,
  // age?:number
}
 let state=ref(0);
 let state2=ref(0);
 let person=reactive({
  name:'zs',
  age:12,
  job:{
    job1:14
  }
 })
// watch 总结：
// 坑：
// 监听的是对象的话，无法正确拿到oldvalue
// 要开开启deep:true
// 如果监听的是对象属性，并且值是对象形式的话，可以通过深拷贝，就可以拿到oldValue
  //  如果监听的类型是ref，简单类型不用.value,封复杂类型需要.value


//  情况1：监听单个ref数据时
// watch(state,(newVal,oldVal)=>{
//   console.log('监听',newVal,oldVal)
// })

// 情况2：监听多个ref时
        //  使用数组形式
// watch([state,state2],(newVal,oldVal)=>{
//   console.log('监听',newVal,oldVal)
// })

// 情况3：监听单个reactive响应式对象时
        // 坑：监听的是对象的话，无法正确拿到oldvalue
              //  配置deep:true无效,默认强制开启深度监视，此时手动配置deep:false 无效
// watch(person,(newVal,oldVal)=>{
//   console.log('监听',newVal,oldVal)
// })

// 情况4：监听单个reactive响应式对象的某个属性
          // 使用函数形式，否则监听不到
//               watch(()=>person.name,(newVal,oldVal)=>{
//   console.log('监听',newVal,oldVal)
// })

// 情况5：监听单个reactive响应式对象的多个属性
          // 使用函数形式+数组
  //         watch([()=>person.name,()=>person.age],(newVal,oldVal)=>{
  // console.log('监听',newVal,oldVal)})

  // 情况6：监听单个reactive响应式对象属性是对象形式
          //  需要开启deep:true
              // 无法获取正确的oldvalue,可以通过深拷贝解决
  //  watch(()=>JSON.parse(JSON.stringify(person.job)),(newVal,oldVal)=>{
  // console.log('监听',newVal,oldVal)},{deep:true})
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
